import React, { Component } from 'react'
import { connect } from 'react-redux'// 高阶组件，原则上connect()称之为高阶组件

// 展示组件 --- UI组件
class App extends Component {
    componentDidMount () {
        this.props.getBannerList()
        this.props.getProList()
    }
    render() {
        const { proList } = this.props
        return (
            <div>
                {
                    proList && proList.map(item => {
                        return (
                            <h5 key={ item.proid }>
                                { item.proname }
                            </h5>
                        )
                    })
                }
            </div>
        )
    }
}

export default connect(
    ({ home: {bannerList, proList}}) => ({ bannerList, proList}),
    (dispatch) => {
        return {
            getBannerList () {
                dispatch({ type: 'REQUEST_BANNER_LIST'})
            },
            getProList () {
                dispatch ({ type: 'REQUEST_PRO_LIST', payload: 2})
            }
        }
    }
)(App)